<template>
	<div class="radioNav">
		<div class="navFirst" :id="isShow ? 'z-show' : ''" :isShow="isShow">
			<div
				@click="changeSelected"
				data-index="1"
				:class="+navIndex === 1 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p4.music.126.net/icULXvfqWJMFvcjTrXSLeA==/109951165406422565.jpg);
					"
				>
				</span>
				<p>情感</p>
			</div>

			<div
				@click="changeSelected"
				data-index="2"
				:class="+navIndex === 2 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p4.music.126.net/fWonYYR8sORR2mEKZfYqjQ==/109951165406418703.jpg);
					"
				></span>
				<p>音乐推荐</p>
			</div>

			<div
				@click="changeSelected"
				data-index="3"
				:class="+navIndex === 3 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p4.music.126.net/Tg1Ids_gRSqaZXyZ3zj0Sg==/109951166109395795.jpg);
					"
				></span>
				<p>有声书</p>
			</div>

			<div
				@click="changeSelected"
				data-index="4"
				:class="+navIndex === 4 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p3.music.126.net/LIkzDiW_ktaSbk_s6MgMkg==/109951165406441809.jpg);
					"
				></span>
				<p>脱口秀</p>
			</div>

			<div
				@click="changeSelected"
				data-index="5"
				:class="+navIndex === 5 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p4.music.126.net/GqeTI3A_g4FFzm_4MoNSsQ==/109951165406411412.jpg);
					"
				></span>
				<p>创作翻唱</p>
			</div>

			<div
				@click="changeSelected"
				data-index="6"
				:class="+navIndex === 6 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p4.music.126.net/3qyLawhgmTyHNabhuaKYTg==/109951165406422635.jpg);
					"
				></span>
				<p>电音</p>
			</div>

			<div
				@click="changeSelected"
				data-index="7"
				:class="+navIndex === 7 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p4.music.126.net/wOmtE80i2EMG2dR7DnTJUw==/109951166108735875.jpg);
					"
				></span>
				<p>知识</p>
			</div>

			<div
				@click="changeSelected"
				data-index="8"
				:class="+navIndex === 8 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p3.music.126.net/bOFLdKG966TolZNpA1VYtw==/109951166108595279.jpg);
					"
				></span>
				<p>二次元</p>
			</div>

			<div
				@click="changeSelected"
				data-index="9"
				:class="+navIndex === 9 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p4.music.126.net/hxNgvipzXFp570FgkiFGcQ==/109951166108605164.jpg);
					"
				></span>
				<p>明星专区</p>
			</div>

			<div
				@click="changeSelected"
				data-index="10"
				:class="+navIndex === 10 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p3.music.126.net/X3gH1OSeg5xQV5bqSv-cEg==/109951166108614572.jpg);
					"
				></span>
				<p>生活</p>
			</div>

			<div
				@click="changeSelected"
				data-index="11"
				:class="+navIndex === 11 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p3.music.126.net/krSruAC4wwq3TXJkcSHvUQ==/109951166108617045.jpg);
					"
				></span>
				<p>亲子</p>
			</div>

			<div
				@click="changeSelected"
				data-index="12"
				:class="+navIndex === 12 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p4.music.126.net/OS8NVOBjZoznnOc5YSBy3w==/109951166108651181.jpg);
					"
				></span>
				<p>新闻资讯</p>
			</div>

			<div
				@click="changeSelected"
				data-index="13"
				:class="+navIndex === 13 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p3.music.126.net/la9HvnMewT3lp72DL-NgKA==/109951166108675738.jpg);
					"
				></span>
				<p>广播剧</p>
			</div>

			<div
				@click="changeSelected"
				data-index="14"
				:class="+navIndex === 14 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p3.music.126.net/4pgJFKZYNU1tZxQdp6xa-A==/109951166111062508.jpg);
					"
				></span>
				<p>故事</p>
			</div>

			<div
				@click="changeSelected"
				data-index="15"
				:class="+navIndex === 15 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p3.music.126.net/HXCbeAs1YDXgOOwE9oY2ew==/109951166111050278.jpg);
					"
				></span>
				<p>人文历史</p>
			</div>

			<div
				@click="changeSelected"
				data-index="16"
				:class="+navIndex === 16 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p3.music.126.net/gFOkDDYZa8m93ccvIlmmvg==/109951166108686306.jpg);
					"
				></span>
				<p>娱乐</p>
			</div>

			<div
				@click="changeSelected"
				data-index="17"
				:class="+navIndex === 17 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p3.music.126.net/BwIOmsgRTVLL1vrVieJD9w==/109951166108695116.jpg);
					"
				></span>
				<p>相声曲艺</p>
			</div>

			<div
				@click="changeSelected"
				data-index="18"
				:class="+navIndex === 18 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p4.music.126.net/W1j-Lb5ozohzud342aPIpw==/109951166108699096.jpg);
					"
				></span>
				<p>其他</p>
			</div>
		</div>
		<div class="navSecond" :id="isShow ? '' : 'z-show'" :isShow="isShow">
			<div
				@click="changeSelected"
				data-index="19"
				:class="+navIndex === 19 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p4.music.126.net/fWonYYR8sORR2mEKZfYqjQ==/109951165406418703.jpg);
					"
				></span>
				<p>常见问题</p>
			</div>
			<div
				@click="changeSelected"
				data-index="20"
				:class="+navIndex === 20 ? 'isActive' : ''"
			>
				<span
					class="bg-i"
					style="
						background-image: url(https://p4.music.126.net/fWonYYR8sORR2mEKZfYqjQ==/109951165406418703.jpg);
					"
				></span>
				<p>我要做主播</p>
			</div>
		</div>
		<button
			class="iconfont icon-xiangzuojiantou"
			@click="goNavSecond"
			:disabled="!isShow"
		></button>
		<button
			class="iconfont icon-xiangyoujiantou"
			@click="goNavSecond"
			:disabled="isShow"
		></button>
		<div class="pic-bottom">
			<div></div>
			<div></div>
		</div>
	</div>
</template>

<script>
export default {
	name: "RadioNav",
};
</script>

<script setup>
import { ref } from "vue";

const isShow = ref(false);
const navIndex = ref(0);

const goNavSecond = () => {
	console.log(1);
	isShow.value = !isShow.value;
};

const changeSelected = (e) => {
	// console.log(1);
	// console.log(e.target.dataset.index);
	if (e.target.nodeName === "DIV") {
		navIndex.value = e.target.dataset.index;
	} else {
		const fatherNode = e.target.parentNode;
		navIndex.value = fatherNode.dataset.index;
	}
};
</script>

<style>
.radioNav {
	width: 1000px;
	margin: 0 auto;
	padding: 30px;
	/* border: 1px solid black; */
	position: relative;
}

.navFirst {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}

.navSecond {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
.navFirst div {
	margin: 10px 17px;
	width: 70px;
	height: 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 5px;
	box-sizing: border-box;
}

.navSecond div .bg-i,
.navFirst div .bg-i {
	width: 48px;
	height: 48px;
}

.navFirst div p,
.navSecond div p {
	padding: 0;
	margin: 0;
	font-size: 12px;
	color: #666;
}

.navSecond {
	width: 1000px;
	height: 180px;
}
.navSecond div {
	margin: 10px 17px;
	width: 70px;
	height: 70px;
	/* border: 1px solid red; */
	border-radius: 5px;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	align-items: center;
}
.navFirst div:hover,
.navSecond div:hover {
	background-color: rgb(224, 224, 224);
	cursor: pointer;
}

#z-show {
	display: none;
}

/* 箭头 */
button {
	border: none;
	background-color: transparent;
	outline: none;
}
.iconfont {
	position: absolute;
	top: 50%;
	margin-top: -8px;
	width: 16px;
	height: 16px;
	color: #999;
}
.iconfont:hover {
	color: #333;
}
.icon-xiangzuojiantou {
	left: 30px;
}
.icon-xiangyoujiantou {
	right: 30px;
}
/* 小点 */
.pic-bottom {
	position: absolute;
	left: 50%;
	margin-left: -15px;
	bottom: 20px;
	width: 30px;
	height: 8px;
	display: flex;
	justify-content: space-between;
	/* border: 1px solid red; */
}
.pic-bottom div {
	width: 6px;
	height: 6px;
	background-color: #999;
	border-radius: 50%;
}
.pic-bottom div:nth-of-type(1) {
	background-color: #ab0e1b;
}
.pic-bottom div:active {
	background-color: #ab0e1b;
}

.isActive {
	border: 2px solid red;
}
</style>
